<template>
    <div class="tourist">
        <div class="top">
            <span class="title">实时游客统计</span>
            <span class="title_bg"></span>
            <span class="booking">可预约总量<i>347843054</i>人</span>
        </div>
        <ul class="persionTime">
            <li>2</li>
            <li>1</li>
            <li>6</li>
            <li>9</li>
            <li>0</li>
            <li>8</li>
            <li>人</li>

        </ul>
        <div class="waterPolo" ref="waterPolo"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
const waterPolo = ref()
import * as echarts from 'echarts';
import 'echarts-liquidfill'
onMounted(() => {
    const myChart = echarts.init(waterPolo.value);

    myChart.setOption({
        title: {
            text: 'ECharts 入门示例'
        },
        series: [
            {
                name: '销量',
                type: 'liquidFill',
                radius: '80%',
                data: [0.6, 0.5, 0.4]
            },

        ]
    });
})

</script>

<style lang="scss" scoped>
.tourist {
    width: 100%;
    height: 391px;
    margin-top: 15px;
    background: url(../images/dataScreen-main-lb.png) no-repeat;
    background-size: cover;

    .top {
        .title {
            display: block;
            color: white;
            font-size: 20px;
        }

        .title_bg {
            display: block;
            width: 68px;
            height: 7px;
            margin-top: 10px;
            background: url(../images/dataScreen-title.png) no-repeat;
            background-size: cover;
        }

        .booking {
            display: block;
            color: white;
            float: right;

            i {
                color: coral;
            }
        }
    }

    .persionTime {
        display: flex;
        margin-top: 35px;
        padding: 0 10px;

        li {
            flex: 1;
            height: 97px;
            line-height: 97px;
            font-size: 35px;
            text-align: center;
            color: #29fcff;
            background: url(../images/total.png);
        }
    }

    .waterPolo {
        width: 100%;
        height: 210px;

    }
}
</style>